<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>TZ-追梦</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        #box{
            width:300px;
            height: 300px;
            border: 1px dashed black;
            margin: 100px auto;
            padding:100px;
        }
        #box div{
            width:300px;
            height: 300px;
            box-shadow: inset 0 0 10px rgba(0,0,0,0.6);

            transform: rotate(0deg);
            transition: 2s;
        }
        #box:hover div{
            /*transform: rotateZ(90deg);*/
            /*transform: scaleZ(0.5);*/
            /*transform: translateZ(-100px);*/
            /*transform: skewX(-30deg);*/

            /*transform: translate3d(0,100px,0);*/
            /*transform: scale3d(1,1.5,1);*/
            /*transform: rotate3d(1,1,1,60deg);*/

            transform: scale(0.5);
        }
    </style>
</head>
<body>
    <div id="box">
        <div id="wrap">1</div>
    </div>

    <script>
            console.log( getComputedStyle(wrap)['transform'] );
    </script>
</body>
</html>